<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4987107_snx6nh60thr.css"
    />
    <style>
      .top-nav {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: #333;
      }
      .top-nav .wrap {
        width: 1226px;
        /* 居中 */
        margin: 0 auto;
      }
      .top-nav .wrap a {
        font-size: 12px;
        color: #b0b0b0;
      }
      .top-nav .wrap a:hover {
        color: #fff;
      }
      .top-nav .wrap span {
        font-size: 12px;
        color: #424242;
        margin: 0 5px;
      }
      .top-nav .wrap .nav-l {
        float: left;
      }
      .top-nav .wrap .nav-l .item {
        float: left;
      }

      /* 顶部导航栏-设置下拉菜单 */
      .top-nav .wrap .nav-l .item.download {
        position: relative;
      }
      .top-nav .wrap .nav-l .item.download .trangle {
        position: absolute;
        width: 0;
        height: 0;
        bottom: 0;
        left: 50%;
        margin-left: -15px;
        /*绘制三角形 */
        border-bottom: 8px solid #fff;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        display: none;
      }
      .top-nav .wrap .nav-l .item.download .app-download {
        position: absolute;
        top: 40px;
        left: 50%;
        width: 124px;
        height: 0;
        margin-left: -67px;
        overflow: hidden;
        text-align: center;
        box-shadow: 0 1px 5px #aaa;
        transition: height 0.2s;
      }
      .top-nav .wrap .nav-l .item.download .app-download img {
        width: 90px;
        margin: 18px auto 0;
      }
      .top-nav .wrap .nav-l .item.download .app-download p {
        font-size: 12px;
        line-height: 12px;
      }
      .top-nav .wrap .nav-l .item.download:hover .app-download {
        height: 148px;
      }
      .top-nav .wrap .nav-l .item.download:hover .trangle {
        display: block;
      }

      .top-nav .wrap .nav-r {
        float: right;
      }
      .top-nav .wrap .nav-r .item {
        float: left;
      }
      .top-nav .wrap .nav-r li:last-child:hover > a {
        color: #ff6a00;
      }
      .top-nav .wrap .nav-r .item.buy {
        width: 120px;
        height: 40px;
        background-color: #424242;
        text-align: center;
        /* 文字横向居中text-align: center;
            文字竖向居中line-height=height;
            元素居中：
                1.元素设置width和height
                2.设置margin:0 auto;
        */
        margin-left: 20px;
      }
      .top-nav .wrap .nav-r .item.buy:hover {
        background-color: #fff;
      }

      .top-nav .wrap .nav-r .item.buy {
        position: relative;
      }
      .top-nav .wrap .nav-r .item.buy .card-buy {
        position: absolute;
        width: 316px;
        height: 90px;
        top: 40px;
        left: 50%;
        margin-left: -256px;
        text-align: center;
        box-shadow: 0 1px 5px #aaa;
        display: none;
      }
      .top-nav .wrap .nav-r .item.buy .card-buy p {
        font-size: 12px;
        line-height: 80px;
        color: #666;
      }
      .top-nav .wrap .nav-r .item.buy:hover .card-buy {
        display: block;
      }

   


    </style>
  </head>
  <body>
    <!-- 顶部黑色导航区域 -->

    <div class="top-nav">
      <div class="wrap">
        <ul class="nav-l">
          <li class="item"><a href="#">小米官网</a><span>|</span></li>
          <li class="item"><a href="#">小米商城</a><span>|</span></li>
          <li class="item"><a href="#">小米澎湃</a><span>|</span></li>
          <li class="item"><a href="#">小米汽车</a><span>|</span></li>
          <li class="item"><a href="#">云服务</a><span>|</span></li>
          <li class="item"><a href="#">I0T</a><span>|</span></li>
          <li class="item"><a href="#">有品</a><span>|</span></li>
          <li class="item"><a href="#">小爱开放平台</a><span>|</span></li>
          <li class="item"><a href="#">资质证照</a><span>|</span></li>
          <li class="item"><a href="#">协议规则</a><span>|</span></li>
          <li class="item download">
            <a href="#">下载app</a>
            <!-- 若希望同时出现显示，那么要成为同级的元素，再设置css调整位置以及样式 -->
            <span>|</span>
            <div class="app-download">
              <img src="./img/download.png" alt="小米app下载图片" />
              <p>小米商城APP</p>
            </div>
            <div class="trangle"></div>
          </li>

          <li class="item"><a href="#">Select Location</a></li>
        </ul>
        <ul class="nav-r">
          <li class="item"><a href="#">登录</a><span>|</span></li>
          <li class="item"><a href="#">注册</a><span>|</span></li>
          <li class="item"><a href="#">消息通知</a></li>
          <li class="item buy">
            <a href="#">
              <i class="iconfont icon-gouwuchekong"></i> &nbsp;购物车（0）</a
            >
            <div class="card-buy">
              <p>购物车中还没有商品，赶紧选购吧！</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

  </body>
</html>
